<template>
	<view>
		<headerNav :navRightIcon="false" leftIconColor="#fff" title="群类型" title-color="#ffffff"/>
		<view style="width: 92%;margin:30rpx auto 0;"  class="relative_1">
			<view class="bg-white pt30 pl30 pr30 pb40 rounded-20">
				<view style="color: #000;font-size: 32rpx;line-height: 36rpx;margin-bottom: 24rpx;">
					群类型
				</view>
				<view style="width: 100%;overflow: hidden;padding:0 9rpx;box-sizing: border-box;" class="box">
					<view @click="qiehuan(index,item.id)" v-for="(item,index) in tj_pp_list" :key='index' :class="item.check?'active':'as'" style="float: left;text-align: center;border-radius: 10rpx;">
						<image :src="item.main_image" style="width: 80rpx;height: 80rpx;display: block;margin: 0 auto;" mode=""></image>
						<view style="line-height: 50rpx;font-size: 24rpx;color: #000;">
							{{item.name || ''}}
						</view>
					</view>
				</view>
			</view>
			<view v-if="erji_list.length>0" class="bg-white pt30 pr30 pb20 pl30 rounded-20 mt30">
				<view style="color: #000;font-size: 32rpx;line-height: 36rpx;margin-bottom: 24rpx;">
					类型分类<text style="color: #999;font-size: 22rpx;margin-left: 10rpx;">可多选</text>
				</view>
				<view class="leixing">
					<text v-for="(item,index) in erji_list" @click="ej_qie(index)" :key='index' :class="item.check?'lx_active':'lx_as'" style="display: inline-block;height: 60rpx;line-height: 60rpx;padding: 0 30rpx;font-size: 28rpx;">
						{{item.name || ''}}
					</text>
				</view>
			</view>

			<view v-if="yixuan!=''" style="margin-top: 40rpx;width: 100%;color: #000;font-size: 24rpx;line-height: 36rpx;" class>
				已选：{{yixuan || ''}}
			</view>
		</view>
		<view @click="queren" style="width: 690rpx;height: 90rpx;background: #1FB0AC;border-radius: 96rpx;line-height: 90rpx;text-align: center;color:#fff;font-size: 32rpx;font-weight: 500;margin:60rpx auto 0;">
			确认
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tj_pp_list:[],
				erji_list:[],
				index:0,
				one_xuan:[],
				yixuan:'',
				category_id:'',
				category_id2:'',
				manage_id:'',
				porkList: [
					{url: require('@/static/msg/pork1.png'),name: '猪肉',id: 1},
					{url: require('@/static/msg/pork2.png'),name: '猪肉',id: 2},
					{url: require('@/static/msg/pork3.png'),name: '猪肉',id: 2},
					{url: require('@/static/msg/pork4.png'),name: '猪肉',id: 2},
					{url: require('@/static/msg/pork5.png'),name: '猪肉',id: 2},
					{url: require('@/static/msg/pork6.png'),name: '猪肉',id: 2},
					{url: require('@/static/msg/pork7.png'),name: '猪肉',id: 2},
					{url: require('@/static/msg/pork8.png'),name: '猪肉',id: 2},
					{url: require('@/static/msg/pork9.png'),name: '猪肉',id: 2}
				]
			}
		},
		onLoad(option) {
			if(option.id){
				this.manage_id=option.id
			}else{
				this.manage_id=''
			}
			this.category_id=option.c1
			this.category_id2=option.c2
			this.xuanze()
		},
		methods:{
			xuanze:function(){
				let that=this
				this.post('api/im/im/group_manage',{manage_id:'',category_id:this.category_id,category_id2:this.category_id2},true).then(res=>{
					console.log('%c [ res ]-67', 'font-size:13px; background:pink; color:#bf2c9f;', res)
					if(res.code==1){
						let manage = res.data.manage
						manage.splice(0,1)
						console.log('%c [ manage ]-81', 'font-size:13px; background:pink; color:#bf2c9f;', manage)
						manage.forEach((item, index) => {
							console.log('%c [ index ]-83', 'font-size:13px; background:pink; color:#bf2c9f;', index)
							console.log('%c [ this.porkList[index] ]-84', 'font-size:13px; background:pink; color:#bf2c9f;', this.porkList[index])
							item.main_image = this.porkList[index].url
						})
						this.tj_pp_list = manage
						console.log('%c [ this.tj_pp_list ]-89', 'font-size:13px; background:pink; color:#bf2c9f;', this.tj_pp_list)
						this.one_xuan = res.data.manage

						for(let i=0;i<this.one_xuan.length;i++){
							for(let j=0;j<this.one_xuan[i].shuzu.length;j++){
								this.yixuan+=this.one_xuan[i].shuzu[j].name+'、'
							}
						}
						this.erji(this.tj_pp_list[0].id)
						for(let i=0;i<this.tj_pp_list.length;i++){
							if(i==0){
								this.tj_pp_list[i].check=true

							}else{
								this.tj_pp_list[i].check=false
							}
							this.tj_pp_list[i].ids='a'+i
							// this.one_xuan[i].shuzu=[]
						}

					}
				})

			},
			qiehuan:function(index,id){
				this.index=index
				for(let i=0;i<this.tj_pp_list.length;i++){
					if(index==i){
						this.tj_pp_list[i].check=true
						console.log(i)
					}else{
						this.tj_pp_list[i].check=false
					}
				}
				this.erji(id)
				this.$forceUpdate()
			},
			erji:function(id){
				let that=this
				let quan=[
					{
						name:'全部',
						id:0
					}
				]
				this.post('api/im/im/group_manage',{manage_id:id,category_id:this.category_id,category_id2:this.category_id2},true).then(res=>{
					console.log(res)
					if(res.code==1){
						if(res.data.manage2.length>0){
							this.erji_list=quan.concat(res.data.manage2)
							for(let i=0;i<this.erji_list.length;i++){
								// this.erji_list[i].check=false
								this.erji_list[i].ids='a'+i
							}
							// console.log(this.one_xuan,9999)
							// console.log(this.index,this.one_xuan[this.index].shuzu.length,this.erji_list.length,44556)

							if(this.one_xuan.length>0 && this.one_xuan[this.index].shuzu.length>0){
								if(this.one_xuan[this.index].shuzu.length==this.erji_list.length-1){
									for(let i=0;i<this.erji_list.length;i++){
										this.erji_list[i].check=true
									}
								}else{
									// for(let i=0;i<this.erji_list.length;i++){
									// 	this.erji_list[i].check=false
									// }
									for(let i=0;i<this.erji_list.length;i++){
										for(let j=0;j<this.one_xuan[this.index].shuzu.length;j++){
											if(this.erji_list[i].name==this.one_xuan[this.index].shuzu[j].name){
												this.erji_list[i].check=true
												break
											}else{
												this.erji_list[i].check=false
											}
										}
									}
								}
							}
						}else{
							this.erji_list=[]
						}


					}
				})
				// this.$forceUpdate()
			},
			ej_qie:function(index){
				if(index==0){
					this.erji_list[0].check=!this.erji_list[0].check
					for(let i=0;i<this.erji_list.length;i++){
						this.erji_list[i].check=this.erji_list[0].check
					}
					this.$forceUpdate()
					for(let i=0;i<this.tj_pp_list.length;i++){
						if(this.index==i){
							let two_one=[]
							if(this.erji_list[0].check){
								for(let i=1;i<this.erji_list.length;i++){
									two_one.push({name:this.erji_list[i].name,id:this.erji_list[i].id})
								}

							}else{
								two_one=[]
							}
							this.one_xuan[this.index].shuzu=two_one
						}
					}

					this.yixuan=''
					for(let i=0;i<this.one_xuan.length;i++){
						for(let j=0;j<this.one_xuan[i].shuzu.length;j++){
							this.yixuan+=this.one_xuan[i].shuzu[j].name+'、'
						}
						// this.yixuan+=this.one_xuan[i].shuzu.join('、')
					}

				}else{
					this.erji_list[index].check=!this.erji_list[index].check
					console.log(this.erji_list,456789)
					let linshi_arr=[]
					for(let i=1;i<this.erji_list.length;i++){
						if(this.erji_list[i].check){
							linshi_arr.push({name:this.erji_list[i].name,id:this.erji_list[i].id})
						}
					}
					this.one_xuan[this.index].shuzu=linshi_arr
					this.yixuan=''
					for(let i=0;i<this.one_xuan.length;i++){
						for(let j=0;j<this.one_xuan[i].shuzu.length;j++){
							this.yixuan+=this.one_xuan[i].shuzu[j].name+'、'
						}

					}

					for(let i=1;i<this.erji_list.length;i++){
						if(this.erji_list[i].check){
							this.erji_list[0].check=true
							this.$forceUpdate()
						}else{
							this.erji_list[0].check=false
							this.$forceUpdate()
							return
						}
					}
				}

			},

			queren:function(){
				let manage_id=[]
				let category_id=[]
				let category_id2=[]
				let xuanzhong=[]
				console.log(this.one_xuan,1111111)
				// return
				for(let i=0;i<this.one_xuan.length;i++){
					if(this.one_xuan[i].shuzu.length>0){
						category_id.push(this.one_xuan[i].id)
						for(let j=0;j<this.one_xuan[i].shuzu.length;j++){
							category_id2.push(this.one_xuan[i].shuzu[j].id)
							xuanzhong.push(this.one_xuan[i].shuzu[j].name)
						}
					}
				}
				if(xuanzhong.length<=0){
					uni.showToast({
						title:'请选择类型分类',
						icon:'none'
					})
					return
				}
				console.log(category_id,category_id2,1111112222333445)
				let pages = getCurrentPages();
				let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
				//修改上一页data里面的searchVal参数值为1211
				prevPage.$vm.category_id=category_id
				prevPage.$vm.category_id2=category_id2
				if(xuanzhong.length>7){
					prevPage.$vm.xianshi=true
				}
				prevPage.$vm.xuanzhong=xuanzhong
				uni.navigateBack({  //uni.navigateTo跳转的返回，默认1为返回上一级
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F8F8F8;
		padding-bottom: 40rpx;
	}
	.leixing{
		overflow: hidden;
	}
	.leixing>text{
		margin-right: 14rpx;
		margin-bottom: 20rpx;
	}
	.lx_active{
		background-color: #81D8D0;
		color: #18A9A5;
		border-radius: 40rpx;
	}
	.lx_as{
		background-color: #F6F6F6;
		color: #242935;
		border-radius: 40rpx;
	}
	.box{
		overflow: hidden;
	}
	.box>view{
		margin-right: 20rpx;
		margin-bottom: 18rpx;
		width: calc(20% - 16rpx);
		box-sizing: border-box;
	}
	.box>view:nth-child(5n){
		margin-right: 0;
	}
	.as {
		width: calc(20% - 16rpx);
	}
	.active{
		border: 1px solid;
		border-radius: 10rpx;
		border-image: linear-gradient(0deg, #1CD19F, #1FB0AC) 10 10;
		// background: linear-gradient(0deg, rgba(31,176,172,0.1) 0%, rgba(31,176,172,0.05) 100%);
	}
	.as{
		border: 1px solid #EEEEEE;
		border-radius: 10rpx;
		background: none;
	}
</style>